
<!--
 * @页面: 饼图
 * @描述:
 * @作者：赵涛
 * @日期: 2021-07-13 14:27:29
-->

<template>
  <div class="pre-charts">
    <div class="pre-charts" id="container"></div>
  </div>
</template>

<script>
import { Pie } from '@antv/g2plot'
export default {
  name: 'preCharts',
  props: {
    pieData: {
      type: Array,
      default: () => { }
    }
  },
  data () {
    return {
      data: []
    }
  },
  watch: {
    pieData (val) {
      this.data = val
    }
  },
  mounted () {
    this.draw()
  },
  methods: {
    draw () {
      const piePlot = new Pie('container', {
        appendPadding: 10,
        data: this.data,
        angleField: 'PerMoney',
        colorField: 'sRegion',
        radius: 0.8,
        color: ['#7b7ef9', '#0278e7', '#8a00e1'],
        legend: {
          layout: 'horizontal',
          position: 'right',
          flipPage: false,
          itemName: {
            style: {
              fill: 'white',
              fontSize: 12
            }
          }
        },
        label: {
          type: 'inner',
          offset: '-30%',
          content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
          style: {
            fontSize: 14,
            textAlign: 'center'
          }
        },
        interactions: [{ type: 'element-active' }]
      })

      piePlot.render()
      const interval = setInterval(() => {
        const newData = this.data
        if (newData) {
          piePlot.changeData(newData)
        } else {
          clearInterval(interval)
        }
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.pre-charts {
  width: 100%;
  height: 100%;
  //   .pre-charts {
  //     width: 100%;
  //     height: 100%;
  //   }
}
</style>
